﻿<div id="songRequestModal" class="messageBox" tabindex="-1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" data-bind="click: close" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Request a song</h4>
    </div>
    <div class="modal-body">
        <p>Got a song, artist, or album you'd like to hear? Type the name below, we'll play it for everyone listening. <a target="_blank" href="http://blog.messianicradio.com/2012/12/faq-how-do-i-request-song.html">Tell me more.</a></p>
        <input id="song-request-textbox" type="text" data-bind="visible: selectedSongRequest() == null, value: songRequestText, valueUpdate: 'keyup', hasFocus: requestInputFocused" placeholder="Type a song, artist, or album" autofocus />
        <div id="songRequestDropDown" data-bind="visible: selectedSongRequest() == null && songRequestMatches().length >= 0, foreach: songRequestMatches">
            <div class="song-request-match ellipsis-overflow" data-bind="click: function () { $root.songRequestMatchClicked($data) }, attr: { title: name + ' by ' + artist + ' on ' + album + ' with community rank ' + communityRank() }">
                <img data-bind="attr: { src: albumArtUri, title: album }" />
                <div class="info">
                    <span data-bind="text: artist + ' - ' + name"></span>
                </div>
            </div>
        </div>

        <div class="selected-song-request ellipsis-overflow" data-bind="with: selectedSongRequest">
            <img data-bind="attr: { src: albumArtUri, title: album }" />
            <div style="vertical-align: middle; display: inline-block; height: 48px;">
                <span data-bind="text: artist + ' - ' + name"></span>
            </div>
            <button type="button" class="close" aria-hidden="true" data-bind="click: $root.resetSelectedSongRequest.bind($root)">×</button>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="click: requestSelectedSong">Request </button>
    </div>
</div>